<template>
    <div class="toplist">

        <!-- 视频内容 -->
        <div v-show="mainDataYes">
            <div class="video-list">
                <CollectionItem class="main-data-item" v-for="(item, index) in mainDataList" :key="index" :video="item">
                </CollectionItem>
            </div>
            <!-- 分页功能 -->
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
                @size-change="handleSizeChange" :current-page="searchCondition.currentPage"
                :page-size="searchCondition.currentSize" :pager-count="11" :page-sizes="[20, 50, 200]"
                :total="mainDataListLength">
            </el-pagination>
        </div>

        <div class="video-list-no" v-show="!mainDataYes">
            <img src="@/assets/img/no-data.png" alt="" />
        </div>
    </div>
</template>
  
<script>
import { pageListUserCollection } from "@/api/user/userCollection";

import CollectionItem from "@/views/common/videoitem/CollectionItem";
import Bus from "@/utils/bus";

export default {
    name: "TopList",
    components: {
        CollectionItem,
    },
    data() {
        return {
            // 主要内容数据
            mainDataList: [],
            mainDataListLength: 0,
            mainDataYes: true,

            // 列表查询接口的搜索条件
            searchCondition: {
                // videoTitle: this.$route.query.keyword,
                userId: this.$route.query.userId,
                currentPage: 1,
                currentSize: 20,
            },
        };
    },
    created() {
        this.getData();

        Bus.$emit("hasRouterChange", 5);
    },
    methods: {
        // 获取内容数据
        async getData() {
            const { data: res } = await pageListUserCollection(this.searchCondition);
            if (res.data.total === 0) {
                this.mainDataYes = false;
            } else {
                this.mainDataYes = true;
                this.mainDataList = res.data.list;
                this.mainDataListLength = res.data.total;
            }
            console.log();
        },

        // 当前页发生改变
        handleCurrentChange(val) {
            this.searchCondition.currentPage = val;
            this.getData();
        },
        handleSizeChange(val) {
            this.searchCondition.currentSize = val;
            this.getData();
        },
    },
};
</script>
  
<style scoped>
.toplist {
    width: 100%;
}

/* 视频内容 */
.video-list {
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
}

.main-data-item {
    margin-top: 20px;
    margin-right: 20px;

    &:hover {
        background: rgba(223, 223, 223, 0.3);
    }
}

.video-list-no {
    margin: 50px;
    text-align: center;
}

.el-pagination {
    margin: 40px;
    text-align: center;
    background: "#00a1d6";
}
</style>